<template>

  <div>
    <div style="margin-bottom: 10px;">
      <el-button size="mini" type="success" @click="toadd">添加</el-button>
    </div>
    <div style="display: flex;font-size: 14px;color: #606266; border-bottom: 1px solid #B9AD99;padding-bottom: 5px;">
      <div style="width: 160px;margin-left: 5px;">名称</div>
      <div style="width: 60px;">类型</div>
      <div style="width: 50px;">图标</div>
      <div style="width: 100px;">上级菜单</div>
      <div style="width: 150px;">菜单URL</div>
      <div style="width: 150px;">权限标识</div>
      <div style="width: 150px;">操作</div>
    </div>
    <el-tree style="margin-top: 10px;" ref="tree" :data="data" node-key="id" default-expand-all
             :expand-on-click-node="false" :default-checked-keys="tree.checkeds">
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <template v-if="data.type =='0'">
          <div style="width: 120px;">{{data.name}}</div>
          <div style="width: 60px;">
            <el-tag size="small">目录</el-tag>
          </div>
        </template>
        <template v-else-if="data.type =='1'">
          <div style="width: 102px;">{{data.name}}</div>
          <div style="width: 60px;">
            <el-tag type="success" size="small">菜单</el-tag>
          </div>
        </template>
        <template v-else>
          <div style="width: 84px;">{{data.name}}</div>
          <div style="width: 60px;">
            <el-tag type="danger" size="small">按钮</el-tag>
          </div>
        </template>
        <div style="width: 50px;"><i :class="['iconfont',data.icon]"></i></div>
        <div style="width: 100px;">{{data.parentname}}</div>
        <div style="width: 150px;">{{data.url}}</div>
        <div style="width: 150px;">{{data.perms}}</div>
        <div>
          <el-button type="warning" size="mini" @click="() => edit(node, data)">
            <i class="iconfont icon-edit"></i>编辑
          </el-button>
          <el-button type="danger" size="mini" @click="() => remove(node, data)">
            <i class="iconfont icon-delete"></i> 删除
          </el-button>
        </div>
      </div>
    </el-tree>
    <el-dialog width="500px" center :title="title"
               :visible="formVisiable">
      <div>
        <!--<MenuCard :menu="editForm"></MenuCard>-->
        <div>
          <div style="margin-left: 10px;margin-bottom: 20px;">
            <el-radio v-model="editForm.type" :label="0" @change="changetab('Folder')">目录</el-radio>
            <el-radio v-model="editForm.type" :label="1" @change="changetab('MenuDetail')">菜单</el-radio>
            <el-radio v-model="editForm.type" :label="2" @change="changetab('Button')">按钮</el-radio>
          </div>
          <router-view></router-view>
          <div style="display: flex; justify-content: flex-end;">
            <el-button size="small" @click="formVisiable = false">关闭</el-button>
            <el-button size="small" @click="reset">重置</el-button>
            <el-button size="small" type="primary" @click="submitmenu">提交</el-button>
          </div>
        </div>

      </div>
    </el-dialog>
  </div>

</template>

<script>

  import axios from 'axios'
  import qs from 'qs'

  import {copy, deepCopy,copyToOtherObj} from "../../js/mycommon.js"
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";

  export default {
    components: {ElButton},
    mounted() {
      this.findAllMenus();
    },
    methods: {

      copymenus(currobj) {
        if (typeof currobj !== 'object') {
          return currobj;
        }
        if (currobj instanceof Array) {
          var newobj = [];
        } else {
          var newobj = {}
        }
        for (var key in currobj) {
          if (typeof currobj[key] !== 'object') {
            // 不是引用类型，则复制值
            newobj[key] = currobj[key];
          } else {
            // 引用类型，则递归遍历复制对象
            if (key == 'children' && currobj['type'] == '1') {

            } else {
              newobj[key] = this.copymenus(currobj[key])
            }
          }
        }
        return newobj
      },

      toadd() {
        this.tilte = "编辑菜单"
        this.editbak = {};
        this.editForm = {};
        this.formVisiable = true;
        this.changeTabByType("MenuDetail");
        this.parentids.splice(0, this.parentids.length);//清空
      },

      findAllMenus() {
        var that = this;
        axios.get("/sys/menu/all").then((res) => {
          that.data = res.data;
          that.parentmenus = this.copymenus(that.data);
          console.log("xxxxx")
          console.log(that.parentmenus)
          console.log("yyyy")
        })
      },
      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
        //发起后他请求删除
      },
      //编辑菜单
      edit(node, data) {
        this.tilte = "编辑菜单"
        this.editbak = copy(data);
        this.editForm = copy(data);
//        copyToOtherObj(data,this.editbak);
//        copyToOtherObj(data,this.editForm);
        this.formVisiable = true;
        this.changeTabByType((data.type+1)%3);
        this.changeTabByType(data.type);
        this.parentids.splice(0, this.parentids.length);//清空
        this.getParentIds(node);
        this.parentids.reverse();
      },

      getParentIds(node) {
        if (node.parent && !(node.parent.data instanceof Array)) {//父节点存在
          this.parentids.push(node.parent.data.id);
          this.getParentIds(node.parent)
        } else {
          return;
        }
      },

      //根据类型切换页签
      changeTabByType(type) {
        var currentrouter = "";
        if (type == '0') {
          currentrouter = "Folder";
        } else if (type == '1') {
          currentrouter = "MenuDetail";
        } else {
          currentrouter = "Button";
        }
        this.changetab(currentrouter);
      },


      //改变页签
      changetab(routername) {
        var that = this;
        this.$router.replace({
          name: routername,
          params: {
            menu: that.editForm,
            menus: that.parentmenus,
            parentids: that.parentids
          }
        })
      },

      reset() {
        this.editForm = copy(this.editbak);
        this.changeTabByType(this.editForm.type)
      },
      //更改菜单
      submitmenu() {
        delete  this.editForm.children;
        var that = this;
        axios.post("/sys/menu", qs.stringify(this.editForm)).then(res => {
          var type = (res.data.code == "200") ? "success" : "warning";
          that.$message({
            type: type,
            message: res.data.message
          })
          if (res.data.code == "200") {
            that.formVisiable = false
            that.findAllMenus();
          }
        })

      }
    },

    data() {
      return {
        tree: {
          qx: "false",
          qxdisable: true,
          checkeds: []
        },
        parentids: [],
        editbak: {},
        data: [],
        parentmenus: [],
        title: "编辑菜单",
        formVisiable: false,
        editForm: {}
      }
    }
  }
</script>

<style>
</style>
